<template>
  <div class="rightDiv">
    <Transition name="fate">
      <ZlRight v-if="allStatus == '总览'" />
      <div class="rightDiv2" v-else-if="allStatus == '四全'">
        <QysRight v-if="twoStatus == '全要素'" />
        <QthRight v-if="twoStatus == '全天候'" />
      </div>
      <div class="rightDiv2" v-else-if="allStatus == '四制'">
        <FzRight v-if="twoStatus == '法制'" />
        <JzRight v-else-if="twoStatus == '机制'" />
      </div>
      <div class="rightDiv2" v-else-if="allStatus == '四预'">
        <YyRight v-if="showYjRight && twoStatus == '预演'" />
      </div>
    </Transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ZlRight from './zlRight.vue'
import QysRight from './qysRight.vue'
import QthRight from './qthRight.vue'
import FzRight from './fzRight.vue'
import JzRight from './jzRight.vue'
import YyRight from './yyRight.vue'
export default {
  name: 'RightVue',
  components: {
    ZlRight,
    QysRight,
    QthRight,
    FzRight,
    JzRight,
    YyRight
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      allStatus: (state) => state.allStatus,
      twoStatus: (state) => state.twoStatus,
      showYjRight: (state) => state.showYjRight
    })
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.rightDiv {
  position: absolute;
  top: 8vh;
  right: 0;
  width: 25vw;
  height: 88vh;
  // border: 1px solid #fff;
  padding-right: 1.5vw;
  box-sizing: border-box;
  overflow: hidden;
  .rightDiv2 {
    width: 100%;
    height: 100%;
  }
}
.fate-enter-active,
.fate-leave-active {
  transition: transform 0.5s;
}

.fate-enter-from,
.fate-leave-to {
  transform: translateX(120%);
}

.fate-enter-to,
.fate-leave-from {
  transform: translateX(0);
}
</style>
